<template>
  <view class="booking-detail">
    <!-- 加载状态 -->
    <view class="loading-container" v-if="isLoading">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
    
    <block v-else-if="bookingInfo">
      <!-- 状态卡片 -->
      <view class="status-card" :class="getStatusClass(bookingInfo.status)">
        <text class="status-text">{{ getStatusText(bookingInfo.status) }}</text>
        <text class="status-desc">{{ getStatusDescription(bookingInfo.status) }}</text>
      </view>
      
      <!-- 基本信息 -->
      <view class="info-card">
        <view class="card-title">课程信息</view>
        
        <view class="info-item">
          <text class="label">课程名称</text>
          <text class="value">{{ bookingInfo.order.courseName || '课程辅导' }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">预约日期</text>
          <text class="value">{{ bookingInfo.bookingDate }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">时间段</text>
          <text class="value">{{ bookingInfo.timeSlot }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">年级</text>
          <text class="value">{{ bookingInfo.grade }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">地区</text>
          <text class="value">{{ bookingInfo.province }} {{ bookingInfo.city }} {{ bookingInfo.district }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">价格</text>
          <text class="value price">¥{{ bookingInfo.price }}</text>
        </view>
      </view>
      
      <!-- 订单信息 -->
      <view class="info-card">
        <view class="card-title">订单信息</view>
        
        <view class="info-item">
          <text class="label">订单号</text>
          <text class="value">{{ bookingInfo.order.orderNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">课程名称</text>
          <text class="value">{{ bookingInfo.order.courseName }}</text>
        </view>
        <view class="info-item">
          <text class="label">教师名称</text>
          <text class="value">{{ bookingInfo.teachers.name }}</text>
        </view>
        
        <!-- <view class="info-item">
          <text class="label">创建时间</text>
          <text class="value">{{ formatTime(bookingInfo.createTime) }}</text>
        </view>
        
        <view class="info-item" v-if="bookingInfo.status !== 0">
          <text class="label">{{ bookingInfo.status === 1 ? '完成时间' : '取消时间' }}</text>
          <text class="value">{{ formatTime(bookingInfo.updateTime) }}</text>
        </view> -->
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons" v-if="bookingInfo.status === 0">
        <button class="action-btn cancel" @tap="cancelBooking">取消预约</button>
        <button class="action-btn contact" @tap="contactTeacher">联系老师</button>
      </view>
    </block>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <image class="empty-icon" src="http://101.200.154.121:19000/teacher-manage-static/static/error.png" mode="aspectFit"></image>
      <text class="empty-text">课程信息不存在或已被删除</text>
      <button class="back-btn" @tap="goBack">返回</button>
    </view>
    
    <!-- 取消确认弹窗 -->
    <view class="modal" v-if="showCancelModal">
      <view class="modal-content">
        <view class="modal-title">确认取消</view>
        <view class="modal-message">是否确认取消该课程预约？</view>
        <view class="modal-actions">
          <button class="modal-btn cancel" @tap="showCancelModal = false">取消</button>
          <button class="modal-btn confirm" @tap="confirmCancel">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { bookingApi } from '../../api'

export default {
  data() {
    return {
      isLoading: true,
      bookingInfo: null,
      bookingId: null,
      showCancelModal: false
    }
  },
  onLoad(options) {
    this.bookingId = options.id
    if (this.bookingId) {
      this.loadBookingDetail()
    } else {
      this.isLoading = false
    }
  },
  methods: {
    // 获取课程预约详情
    async loadBookingDetail() {
      try {
        this.isLoading = true
        
    /*
		const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `api/bookings/${this.bookingId}`,
            method: 'GET',
            header: {
              'Authorization': uni.getStorageSync('access_token')
            },
            success: (response) => {
              resolve(response.data)
            },
            fail: (error) => {
              reject(error)
            }
          })
        })
	*/
		const res = await bookingApi.getBookingDetail(this.bookingId)
   
   
         
        if (res.code == 200 && res.data) {
          this.bookingInfo = res.data
        } else {
			
          uni.showToast({
            title: res.message || '获取预约详情失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载预约详情失败:', error)
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      switch (Number(status)) {
        case 0: return '未支付'
        case 1: return '已支付'
        case 2: return '已取消'
        default: return '未知状态'
      }
    },
    
    // 获取状态描述
    getStatusDescription(status) {
      switch (Number(status)) {
        case 0: return '老师将按照约定时间为您上课'
        case 1: return '课程已经支付，感谢您的支持'
        case 2: return '该课程已取消'
        default: return ''
      }
    },
    
    // 获取状态类名
    getStatusClass(status) {
      switch (Number(status)) {
        case 0: return 'pending'
        case 1: return 'completed'
        case 2: return 'cancelled'
        default: return ''
      }
    },
    
    // 格式化时间
    formatTime(timeString) {
      if (!timeString) return '-'
      try {
        const date = new Date(timeString)
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
      } catch (e) {
        return timeString
      }
    },
    
    // 取消预约
    cancelBooking() {
      this.showCancelModal = true
    },
    
    // 确认取消预约
    async confirmCancel() {
      try {
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `http://203.34.152.33/user/api/bookings/cancel/${this.bookingId}`,
            method: 'PUT',
            header: {
              'Authorization': uni.getStorageSync('access_token')
            },
            success: (response) => {
              resolve(response.data)
            },
            fail: (error) => {
              reject(error)
            }
          })
        })
        
        if (res.code === 200) {
          uni.showToast({
            title: '预约已取消',
            icon: 'success'
          })
          
          // 更新本地状态
          this.bookingInfo.status = 2
          this.bookingInfo.updateTime = new Date().toISOString()
        } else {
          uni.showToast({
            title: res.message || '取消失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('取消预约失败:', error)
        uni.showToast({
          title: '取消失败，请重试',
          icon: 'none'
        })
      } finally {
        this.showCancelModal = false
      }
    },
    
    // 联系老师
    contactTeacher() {
      uni.showToast({
        title: '联系老师功能开发中',
        icon: 'none'
      })
    },
    
    // 返回
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.booking-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #4080FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.status-card.pending {
  background-color: #FFF7E8;
}

.status-card.completed {
  background-color: #F6FFED;
}

.status-card.cancelled {
  background-color: #F5F5F5;
}

.status-text {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.status-card.pending .status-text {
  color: #FF9500;
}

.status-card.completed .status-text {
  color: #52C41A;
}

.status-card.cancelled .status-text {
  color: #999;
}

.status-desc {
  font-size: 28rpx;
  color: #666;
}

.info-card {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.info-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  width: 160rpx;
  color: #666;
  font-size: 28rpx;
}

.value {
  flex: 1;
  color: #333;
  font-size: 28rpx;
}

.value.price {
  color: #FF6B00;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  padding: 30rpx;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 30rpx;
  margin: 0 15rpx;
  border-radius: 44rpx;
}

.action-btn.cancel {
  background-color: #ffffff;
  color: #FF6B00;
  border: 1px solid #FF6B00;
}

.action-btn.contact {
  background-color: #4080FF;
  color: #ffffff;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.back-btn {
  width: 240rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #4080FF;
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 40rpx;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.modal-message {
  padding: 40rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}

.modal-actions {
  display: flex;
  border-top: 1px solid #f0f0f0;
}

.modal-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 28rpx;
}

.modal-btn.cancel {
  color: #999;
  border-right: 1px solid #f0f0f0;
}

.modal-btn.confirm {
  color: #FF6B00;
}
</style> 
  